//
// avatar
//

avatar {
  border-radius: $circular-radius;
  font-weight: bold;

  // The list of colors to generate avatars.
  // Each avatar color is represented by a font color, a gradient start color and a gradient stop color.
  // There are 8 different colors for avtars in the list if you change the number of them you
  // need to update the NUMBER_OF_COLORS in src/adw-avatar.c.
  // The 2D list has this form: ((font-color, gradient-top-color, gradient-bottom-color)).
  $avatarcolorlist: ((#cfe1f5, #83b6ec, #337fdc), // blue
      (#caeaf2, #7ad9f1, #0f9ac8), // cyan
      (#cef8d8, #8de6b1, #29ae74), // green
      (#e6f9d7, #b5e98a, #6ab85b), // lime
      (#f9f4e1, #f8e359, #d29d09), // yellow
      (#ffead1, #ffcb62, #d68400), // gold
      (#ffe5c5, #ffa95a, #ed5b00), // orange
      (#f8d2ce, #f78773, #e62d42), // raspberry
      (#fac7de, #e973ab, #e33b6a), // magenta
      (#e7c2e8, #cb78d4, #9945b5), // purple
      (#d5d2f5, #9e91e8, #7a59ca), // violet
      (#f2eade, #e3cf9c, #b08952), // beige
      (#e5d6ca, #be916d, #785336), // brown
      (#d8d7d3, #c0bfbc, #6e6d71), // gray
    );

  @for $i from 1 through length($avatarcolorlist) {
    &.color#{$i} {
      $avatarcolor: nth($avatarcolorlist, $i);
      background-image: linear-gradient(nth($avatarcolor, 2), nth($avatarcolor, 3));
      color: nth($avatarcolor, 1);
    }
  }

  &.contrasted {
    color: white;
  }

  &.image {
    background: none;
  }
}

//
// Cards
//

.card {
  @at-root %card, & {
    border-radius: $corner-radius;
    box-shadow: none;
    border: 1px solid $border;
    background-clip: border-box;
    background-color: $base;
    color: $text-secondary;
  }
}

//
// preferencespage
//

preferencespage > scrolledwindow > viewport > clamp > box {
  margin: 24px 12px;
  border-spacing: 24px;
}

preferencesgroup > box {
  &, .labels {
    border-spacing: $space-size;
  }

  > box.header:not(.single-line) {
    margin-bottom: $space-size;
  }

  > box.single-line {
    min-height: 34px;
  }

  button.background-preview-button.toggle {
    padding: 0;
    background: none;
    box-shadow: none;
    outline-color: transparent;
    outline-width: 3px;
    outline-offset: $space-size / 2;
    outline-style: solid;

    &, > background-preview {
      border-radius: 6px;
    }

    &:hover {
      outline-color: $fill;
    }

    &:active {
      outline-color: $track;
    }

    &:checked {
      outline-color: $primary;
    }
  }
}

//
// AdwStatusPage
//

statuspage {
  > scrolledwindow > viewport > box {
    margin: 36px $space-size * 2;
    border-spacing: 36px;

    > clamp > box {
      border-spacing: $space-size * 2;

      > .icon {
        -gtk-icon-size: 128px;

        color: gtkalpha(currentColor, 0.55);

        &:disabled {
          opacity: 0.35;
        }

        &:not(:last-child) {
          margin-bottom: 24px;
        }
      }
    }
  }

  &.compact > scrolledwindow > viewport > box {
    margin: 24px 12px;
    border-spacing: 24px;

    > clamp > box {
      > .icon {
        -gtk-icon-size: 96px;

        &:not(:last-child) {
          margin-bottom: $space-size * 2;
        }
      }

      > .title {
        font-size: 18pt;
      }
    }
  }
}

//
// Toasts
//

toast {
  margin: $space-size * 2;
  margin-bottom: $space-size * 4;
  border-radius: $circular-radius;
  border-spacing: $space-size;
  padding: $space-size;
  box-shadow: $shadow-z12, inset 0 1px highlight($osd);
  background-color: $osd;
  color: on($osd);
  border: none;

  &:dir(ltr) {
    padding-left: $space-size * 2;
  }

  &:dir(rtl) {
    padding-right: $space-size * 2;
  }

  > label {
    margin: 0 $space-size;
  }

  button, button.text-button,
  button.circular.flat {
    @extend %button-on-dark;
  }
}

//
// viewswitcher
//

viewswitcher {
  margin: 0;

  &.wide {
    button.toggle:checked, button.toggle.flat:checked {
      background-color: $primary;
      color: on($primary);

      &:backdrop {
        color: on($primary, disabled);
      }

      indicatorbin.needs-attention > indicator {
        > label {
          color: $primary;
        }

        background-color: on($primary);
      }
    }
  }

  &.narrow button.toggle {
    border-radius: 0;
    margin: 0;
    border: none;
  }

  headerbar &.narrow button.toggle {
    border-radius: if($topbar =='dark' and $theme =='default' and $variant =='light', $corner-radius, 0 0 $window-radius $window-radius);
    margin: if($topbar =='dark' and $theme =='default' and $variant =='light', 2px 0, 0);
    min-width: 120px;
    padding: 0;
    background-color: transparent;

    &:checked {
      background-color: $titlebar-primary;
      color: on($titlebar-primary);

      indicator {
        background: on($titlebar-primary);

        > label {
          color: $titlebar-primary;
        }
      }

      &:backdrop {
        color: on($titlebar-primary, disabled);
      }
    }

    &:focus {
      box-shadow: none;
    }
  }

  button.toggle {
    font-weight: bold;
    padding: 0;
    min-height: 0;
    margin: 0;

    > stack > box {
      &.narrow {
        font-size: 0.75rem;
        padding-top: $space-size + 1px;
        padding-bottom: $space-size - 1px;
        border-spacing: $space-size - 2px;

        > stack > label {
          padding-left: $space-size + 2px;
          padding-right: $space-size + 2px;
        }
      }

      &.wide {
        padding: 0 $space-size * 2;
        border-spacing: $space-size;
      }
    }
  }
}

// AdwViewSwitcherBar
viewswitcherbar actionbar > revealer > box {
  padding: 0;
}

// AdwViewSwitcherTitle
viewswitchertitle {
  margin-top: 0;
  margin-bottom: 0;

  viewswitcher {
    margin-left: $space-size * 2;
    margin-right: $space-size * 2;

    &.narrow {
      margin-top: 0;
      margin-bottom: 0;

      button.toggle {
        > stack > box {
          &.narrow {
            padding-top: 0;
            padding-bottom: 0;
            border-spacing: 0;
          }
        }
      }
    }

    &.wide {
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  windowtitle {
    margin-top: 0;
    margin-bottom: 0;
  }
}

// AdwIndicatorBin
indicatorbin {
  > indicator, > mask {
    min-width: $space-size;
    min-height: $space-size;
    border-radius: $circular-radius;
  }

  > indicator {
    margin: 1px;
    padding: 0;
    background: gtkalpha(currentColor, .4);

    > label {
      font-size: 0.6rem;
      font-weight: bold;
      padding: 2px 5px;
      color: white;
    }
  }

  > mask {
    padding: 1px;
    background: black;
  }

  &.needs-attention > indicator {
    background-color: $primary;

    > label {
      color: on($primary);
    }
  }
}


// ThemeSelector
themeselector, // Gnome text editor

panelthemeselector {
  // Gnome builder
  margin: $space-size * 1.5;

  checkbutton {
    padding: 0;
    min-height: 44px;
    min-width: 44px;
    padding: 1px;
    background-clip: content-box;
    border-radius: $circular-radius;
    box-shadow: inset 0 0 0 1px $border;

    &.follow:checked,
    &.light:checked,
    &.dark:checked {
      box-shadow: inset 0 0 0 2px $primary;
    }

    &.follow {
      background-image: linear-gradient(to bottom right, #ffffff 50%, #202020 50%);
    }

    &.light {
      background-color: #ffffff;
    }

    &.dark {
      background-color: #202020;
    }

    &.theme-selector radio {
      -gtk-icon-source: none;
      border: none;
      background: none;
      box-shadow: none;
      min-height: 16px;
      min-width: 16px;
      padding: 2px;

      &:hover, &:active, &:checked {
        background-color: transparent;
      }

      &:checked {
        -gtk-icon-size: 16px;
        -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/scalable/check-symbolic.svg")),
            -gtk-recolor(url("assets/scalable/check-symbolic@2.svg")));

        &, &:hover, &:active {
          color: on($primary);
          background-color: $primary;
          box-shadow: 0 2px 3px -1px rgba(black, 0.08), 0 1px 2px 0 rgba(black, 0.1);
        }
      }
    }
  }
}

popover themeswitcher {
  // Gnome console
  padding: $space-size;

  .check {
    min-height: 20px;
    min-width: 20px;
    background: none;
    padding: 0;
    margin: 0;
    border-radius: $circular-radius;
    color: on($primary);
    background-color: $primary;

    &, &:hover, &:active {
      box-shadow: 0 2px 3px -1px rgba(black, 0.08), 0 1px 2px 0 rgba(black, 0.1);
    }
  }

  radio {
    &, &:hover, &:active, &:checked, &:checked:hover {
      -gtk-icon-source: none;
      -gtk-icon-size: 0;
      background-color: transparent;
      border: none;
      background: none;
      box-shadow: none;
      color: transparent;
    }
  }

  checkbutton {
    padding: 0;
    min-height: 44px;
    min-width: 44px;
    padding: 1px;
    background-clip: content-box;
    border-radius: $circular-radius;
    box-shadow: inset 0 0 0 1px $border;

    &:checked {
      box-shadow: inset 0 0 0 2px $primary;
    }

    &.system {
      background: linear-gradient(-45deg, #1e1e1e 50%, white 50%);
    }

    &.light {
      color: gtkalpha(black, .8);
      background-color: white;
    }

    &.dark {
      color: white;
      background-color: #1e1e1e;
    }
  }
}

//
// AdwDialog
//

floating-sheet {
  > dimming {
    background-color: rgba(black, 0.35);
  }

  > sheet {
    border-radius: $window-radius;
    outline: none;

    @if $rimless =='true' {
      box-shadow: $shadow-z16;
    }

    @else {
      box-shadow: $shadow-z16, 0 0 0 2px $primary;
    }
  }
}

dialog.bottom-sheet {
  &:not(.narrow) sheet {
    margin-left: 30px;
    margin-right: 30px;

    &.flush-left, &.flush-right, &.flush-left.flush-right {
      > outline {
        box-shadow: none;
      }
    }
  }
}

dialog-host > dialog.background {
  background: none;

  sheet {
    background-color: $background;
    color: $text;
  }
}

dialog-host > dialog.view {
  background: none;

  sheet {
    @extend %view;
  }
}

dialog-host > dialog.osd:not(progressbar):not(button):not(menubutton):not(splitbutton) {
  background: none;

  sheet {
    @extend %osd;
  }
}

//
// AdwToggleGroup
//

toggle-group {
  background: $button;
  border-radius: $corner-radius + $space-size / 2;
  padding: $space-size / 2;
  border-spacing: 0;

  &:disabled {
    background-color: $fill;
  }

  > toggle {
    border-radius: $corner-radius;
    font-weight: bold;
    min-width: $medium-size;
    min-height: $medium-size - $space-size;
    color: $text-secondary;

    &.image-button > image:disabled {
      filter: opacity(0.5);
    }

    &.text-button {
      min-width: 18px + $space-size;
      padding-left: 11px - $space-size / 2;
      padding-right: 11px - $space-size / 2;

      > label:disabled {
        filter: opacity(0.5);
      }
    }

    &.image-text-button {
      min-width: 10px + $space-size;
      padding-left: 11px - $space-size / 2;
      padding-right: 11px - $space-size / 2;

      > buttoncontent > box > label {
        padding: 0;
      }

      > buttoncontent > box > image:disabled,
      > buttoncontent > box > label:disabled {
        filter: opacity(0.5);
      }
    }

    &:hover {
      background-color: $overlay-hover;
      color: $text;
    }

    &:active, &.keyboard-activating {
      background-color: $overlay-active;
      color: $text;
    }

    &:checked {
      background-color: $primary;
      color: on($primary);
      box-shadow: none;

      &:disabled {
        background-color: rgba($primary, 0.5);
      }
    }
  }

  &.osd,
  .osd & {
    background: $osd;
    color: on($osd);
    border-radius: $corner-radius + $space-size / 2;
    box-shadow: none;
    padding: $space-size / 2;
    margin: 0;

    > toggle {
      border-radius: $corner-radius;

      &, &:hover, &:active, &.keyboard-activating {
        box-shadow: none;
        color: on($osd);
      }

      &:checked {
        background-color: white;
        color: rgba(black, 0.8);
        box-shadow: none;
      }

      &:disabled {
        background-color: transparent;
        color: on($osd, disabled);
      }
    }

    &:not(.flat) > toggle:checked {
      background-color: white;
      color: rgba(black, 0.8);
      box-shadow: none;

      &:disabled {
        box-shadow: none;
      }
    }
  }

  &.vertical > toggle:not(.text-button):not(.image-text-button) {
    min-width: $medium-size - $space-size;
  }

  > separator {
    transition: opacity 200ms $ease-out;

    &.horizontal {
      margin: $space-size / 2 1px;
    }

    &.vertical {
      margin: 1px $space-size / 2;
    }

    &.hidden {
      opacity: 0;
    }

    &:disabled {
      filter: Opacity(0.35);
    }
  }

  &.round {
    border-radius: $circular-radius;

    toggle {
      border-radius: $circular-radius;

      &.text-button,
      &.image-text-button {
        padding-left: 15px - $space-size / 2;
        padding-right: 15px - $space-size / 2;
      }
    }

    separator {
      &.horizontal {
        margin: $space-size 1px;
      }

      &.vertical {
        margin: 1px $space-size;
      }
    }
  }

  &.flat {
    background: none;
    color: inherit;
    box-shadow: none;

    > toggle {
      &:checked {
        background-color: $overlay-checked;
        color: inherit;
        box-shadow: none;

        &:hover {
          background-color: $overlay-focus-hover;
        }

        &:active, &.keyboard-activating {
          background-color: $overlay-active;
        }

        &:disabled {
          background-color: $overlay-normal;
        }
      }
    }

    > separator {
      background: none;
    }
  }
}

/*************************
 * AdwInlineViewSwitcher *
 *************************/

inline-view-switcher > toggle-group {
  &.icons > toggle {
    min-width: $medium-size;
  }

  &.labels { border-spacing: 0; }

  &.labels > toggle {
    min-width: 18px + $space-size;

    > widget > indicatorbin {
      padding-left: 11px - $space-size / 2;
      padding-right: 11px - $space-size / 2;

      > label {
        padding: 0 6px;
      }

      > indicator, > mask {
        transform: translateY(2px);
      }
    }
  }

  &.both > toggle {
    min-width: 10px + $space-size;

    > widget > box {
      padding-left: 15px - $space-size / 2;
      padding-right: 15px - $space-size / 2;
      border-spacing: 6px;
    }
  }
}